<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>重定向和别名</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <router-link to="/a">to a -> redirect to b</router-link><br />
      <router-link to="/c">to c</router-link><br />
      <router-link to="/d">to d -> redirect to a -> redirect to b</router-link><br />
      <router-link to="/e">to e -> redirect to b</router-link><br />
      <router-link to="/f">to e -> redirect to c</router-link><br />
      <router-view></router-view>
    </div>

    <div id="app2" style="border: 1px dashed blue;margin-bottom: 2px;">
      <router-link to="/a">to a</router-link><br />
      <router-link to="/b">to b</router-link><br />
      <router-view></router-view>
    </div>

    <script type="text/javascript">
      // 1 重定向
      //   重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
      const A = {template: '<div>AAA</div>'}
      const B = {template: '<div>BBB</div>'}
      const C = {template: '<div>CCC</div>'}
      const router = new VueRouter({
        routes: [
          // 重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
          {name: 'a', path: '/a', redirect: '/b'},
          {name: 'b', path: '/b', component: B},
          {path: '/c', component: C},
          // 重定向的目标也可以是一个命名的路由：
          {path: '/d', redirect: {name: 'a'}},
          {path: '/e', redirect: {name: 'b'}},
          // 甚至是一个方法，动态返回重定向目标：
          {path: '/f', redirect: to => {
            // 方法接收 目标路由 作为参数
            // return 重定向的 字符串路径/路径对象
            console.log(to.fullPath, 'to')
            return '/c'
          }}
        ]
      })
      
      new Vue({
        el: '#app1',
        router
      })
      
      // 别名
      //   “重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？   /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
      const router2 = new VueRouter({
        routes: [
          {path: '/a', component: A, alias: '/b'}
        ]
      })

      new Vue({
        el: '#app2',
        router: router2
      })
      //   “别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
    </script>
  </body>
</html>